<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">org-tree</view>
			<view class="tui-page__desc">组织架构树：多级数据展示,可左右滑动查看</view>
		</view>
		<scroll-view scroll-x class="tui-scroll__view">
			<tui-org-tree collapsible :treeData="treeData" @click="handleClick"></tui-org-tree>
		</scroll-view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				treeData: [{
					text: '总经理办公会',
					value: 1,
					//vertical,horizontal 为空则自适应排列
					align: '',
					children: [{
						text: "公司总经理",
						value: 100,
						children: [{
								text: "市场部",
								value: 200,
								align: 'horizontal',
								children: [{
										text: "区域经理",
										value: 201,
										children: []
									},
									{
										text: "售后服务",
										value: 202,
										children: []
									},
									{
										text: "综合助理",
										value: 203,
										children: []
									},
									{
										text: "网络工程师",
										value: 204,
										children: []
									}
								]
							},
							{
								text: "财务部",
								value: 300,
								align: 'horizontal',
								children: [{
										text: "财务",
										value: 301,
										children: []
									},
									{
										text: "出纳",
										value: 302,
										children: []
									}
								]
							},
							{
								text: "研发部",
								value: 400,
								align: 'horizontal',
								children: [{
										text: "设计",
										value: 401,
										children: []
									},
									{
										text: "雕刻",
										value: 402,
										children: []
									},
									{
										text: "结构工程",
										value: 403,
										children: []
									},
									{
										text: "工艺工程",
										value: 403,
										children: []
									}
								]
							},
							{
								text: "人事部",
								value: 500,
								align: 'horizontal',
								children: [{
										text: "经理",
										value: 501,
										children: []
									},
									{
										text: "前台",
										value: 502,
										children: []
									}
								]
							},
							{
								text: "物控部",
								value: 600,
								align: 'horizontal',
								children: [{
										text: "采购",
										value: 601,
										children: []
									},
									{
										text: "生管",
										value: 602,
										children: []
									},
									{
										text: "统计",
										value: 603,
										children: []
									},
									{
										text: "货仓",
										value: 604,
										align: 'vertical',
										children: [{
											text: "来料仓管",
											value: 60501,
											children: []
										}, {
											text: "半成品仓管",
											value: 60502,
											children: []
										}, {
											text: "成品仓管",
											value: 60503,
											children: []
										}]
									}
								]
							}
						]
					}]
				}]
			}
		},
		methods: {
			handleClick(e) {
				console.log(e)
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 120rpx;
	}

	.tui-scroll__view {
		width: 100%;
		height: 470px;
	}
</style>
